<!-- 底部选项卡组件 -->
<template>
  <div class="foot-bar">
    <div class="bar-left">
      <div class="bar-shop">
        <img class="icon" src="~@/assets/img/common/shop.svg" alt="店铺图标" />
        <span>店铺</span>
      </div>
      <div class="bar-customer-service">
        <img
          class="icon"
          src="~@/assets/img/common/customerService.svg"
          alt="客服图标"
        />
        <span>客服</span>
      </div>
      <div class="bar-like">
        <img class="icon" src="~@/assets/img/common/like.svg" alt="爱心图标" />
        <span>喜欢</span>
      </div>
    </div>
    <div class="bar-right">
      <div class="bar-shop-trolley">
        <span>加入购物车</span>
      </div>
      <div class="bar-buy">
        <span>立即购买</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {};
  },
  components: {}
};
</script>

<style scoped>
.foot-bar {
  background: #fff;
  height: 50px;
  overflow: hidden;
  display: flex;
}
.bar-left {
  flex: 1;
  display: flex;
  border-top: 1px solid rgba(121, 121, 121, 0.1);
}
.icon {
  height: 24px;
  margin-bottom: 2px;
}
.bar-shop,
.bar-customer-service,
.bar-like {
  flex: 1;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.bar-shop {
  color: var(--color-tint);
}
.bar-customer-service {
  color: var(--color-tint);
  border: 1px solid rgba(121, 121, 121, 0.1);
  border-top: 0;
  border-bottom: 0;
}
.bar-right {
  flex: 1;
  display: flex;
}
.bar-shop-trolley,
.bar-buy {
  flex: 1;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bar-shop-trolley {
  color: var(--color-tint);
  background-color: #ffe6e8;
}
.bar-buy {
  color: #fff;
  background: var(--color-high-text);
}
</style>
